<template>
  <view>
    <view v-if="list.length">
      <view v-for="i in list" :key="i.id">
        <Order :i="i" @insideEvent="insideEvent"></Order>
      </view>
    </view>
    <view v-else>
      <view class="notFound">
        <image src="./static/notfound.png"></image>
        <text>暂无订单信息</text>
      </view>
    </view>
  </view>
</template>

<script>
import Order from './order'
import { getOrderList } from '@/api/invoicer'

export default {
  components: { Order },
  data() {
    return {
      list: [],
      params: {
        tag: '',
        pageNumber: 1,
        pageSize: 10
      },
      // 总页数
      pages: 1
    }
  },
  onLoad(e) {
    this.params.tag = e.tag
    switch (e.tag) {
      case 'ALL':
        uni.setNavigationBarTitle({ title: '全部订单' })
        break
      case 'WAIT_SHIP':
        uni.setNavigationBarTitle({ title: '未出库订单' })
        break
      case 'WAIT_ROG':
        uni.setNavigationBarTitle({ title: '已出库订单' })
        break
      case 'COMPLETE':
        uni.setNavigationBarTitle({ title: '已完成订单' })
        break
    }
    this.getList()
  },
  // 监听触底
  onReachBottom() {
    if (this.pages !== this.params.pageNumber) {
      this.params.pageNumber++
      this.getList()
    }
  },
  onPullDownRefresh() {
    this.insideEvent()
  },
  methods: {
    getList() {
      getOrderList(this.params).then(r => {
        if (r.code === 200) {
          this.list.push(...r.data.records)
        }
      })
    },
    insideEvent() {
      this.params.pageNumber = 1
      this.list = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.notFound {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  image {
    width: 167.36rpx;
    height: 211.11rpx;
  }

  text {
    font-weight: 400;
    font-size: 29rpx;
    color: #b9b9b9;
  }
}
</style>
